<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>手写签名功能</title>
  <style>
      body {
          font-family: Arial, sans-serif;
          text-align: center;
      }
      /* Canvas容器样式 */
      #canvas-container {
          position: relative;
          display: inline-block;
          margin-top: 20px;
          border: 1px solid #ccc;
          border-radius: 4px;
      }
      
      /* 背景canvas样式 */
      #background-canvas {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;
      }
      
      /* 签名canvas样式 */
      #signature-canvas {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 2;
      }
      /* 加载楷体字体 */
      @font-face {
          font-family: 'STKai';
          src: url('path/to/your/kaishu_font.ttf') format('truetype');
      }
  </style>
</head>
<body>
<h1>请在下方签名</h1>
<div id="canvas-container">
  <canvas id="background-canvas" width="400" height="200"></canvas>
  <canvas id="signature-canvas" width="400" height="200"></canvas>
</div>
<br>
<button onclick="clearSignature()">清空</button>
<button onclick="saveSignature()">保存</button>

<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>
<script>
  const backgroundCanvas = document.getElementById('background-canvas');
  const signatureCanvas = document.getElementById('signature-canvas');
  const backgroundCtx = backgroundCanvas.getContext('2d');
  const signatureCtx = signatureCanvas.getContext('2d');

  let signaturePad;

  // 绘制背景到背景canvas
  function drawBackground() {
    // 设置背景色
    backgroundCtx.fillStyle = 'rgb(255, 255, 255)';
    backgroundCtx.fillRect(0, 0, 400, 200);
    
    // 绘制楷体文字"张三"
    backgroundCtx.font = '128px STKai, serif';
    backgroundCtx.fillStyle = 'rgba(85, 85, 85, 0.2)'; // 使用透明度为0.2的灰色
    backgroundCtx.textAlign = 'center';
    backgroundCtx.textBaseline = 'middle';
    backgroundCtx.fillText('张三', 200, 100);
  }

  // 初始化签名功能
  function initializeSignaturePad() {
    try {
      // 绘制背景到背景canvas
      drawBackground();
      
      // 初始化签名功能（只在签名canvas上）
      signaturePad = new SignaturePad(signatureCanvas, {
        backgroundColor: 'rgba(255, 255, 255, 0)' // 完全透明背景
      });
      
      console.log('双Canvas签名功能初始化完成');
    } catch (error) {
      console.error('初始化签名功能时出错:', error);
    }
  }

  // 页面加载完成后初始化
  window.addEventListener('load', initializeSignaturePad);

  // 清空签名
  function clearSignature() {
    if (signaturePad) {
      signaturePad.clear();
      // 背景canvas不需要重新绘制，它保持不变
    }
  }

  // 保存签名
  function saveSignature() {
    if (!signaturePad || signaturePad.isEmpty()) {
      alert("请先签名！");
      return;
    }

    try {
      // 只保存签名canvas的内容，自动去除背景
      const signatureDataURL = signaturePad.toDataURL();
      
      // 转换为JPG格式并下载
      const jpgDataURL = signatureDataURL.replace('image/png', 'image/jpeg');
      
      // 创建下载链接
      const link = document.createElement('a');
      link.download = '纯净签名_' + new Date().toISOString().slice(0, 19).replace(/:/g, '-') + '.jpg';
      link.href = jpgDataURL;
      
      // 触发下载
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      
      alert("纯净签名已保存（不含背景）！");
    } catch (error) {
      console.error('保存签名时出错:', error);
      alert("保存失败，请重试！");
    }
  }
</script>
</body>
</html>
